<template>
    <div class="notice_content">
      <jm-head ref="head"></jm-head>
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="0"
          finished-text="没有更多了"
          @load="getList"
        >
            <div class="notice_list box" v-for="(item,index) in list" :key = "index" @click="goDetail(item.id)">
                <img src="@/assets/img/notice.jpg" alt="头像">
                <div class="notice_menu box">
                    <h2 class="ellipsis">{{item.title}}</h2>
                    <p class="ellipsis">{{item.created_at}}</p>
                </div>
                <div class="notice_fr">></div>
            </div>
        </van-list>
    </div>
</template>
<script>
    import { getList } from "@/api/notice";
    import JmHead from '../head/head'
    import Vue from 'vue'
    import { List } from 'vant';

    Vue.use(List)
    export default {
        name: 'notice',
        components: {
            JmHead
        },
        data () {
            return {
                list: [],
                page: 1,
                active: 0,
                loading: false,
                finished: false,
            }
        },
        methods: {
            getList() {
                getList({page: this.page}).then(res => {
                    this.list = this.list.concat(res.data.data)
                    this.page++
                    this.loading = false
                    if (this.page > res.data.last_page) {
                        this.finished = true
                    }
                })
            },
            goDetail(id) {
                this.$router.push({path: '/notice/detail', query: {id}})
            }
        },
        activated: function () {
            this.list = []
            this.active = 0
            this.page = 1
            this.finished = false
            const _this = this
            setTimeout(function(){
              _this.active = 1
            }, 100)

            this.$refs.head.setNavBarUrl()
        }
    }
</script>

<style lang="stylus" scoped>
    .notice_content
        width 100%
        min-height 100vh
        overflow hidden
        .notice_list
            padding .2rem .3rem
            overflow hidden
            display flex
            display -webkit-flex
            width 100%
            margin 0 auto
            img
                width 1rem
                height 1rem
                border-radius 4px
                overflow hidden
                margin-right .3rem
            .notice_menu
                flex 1
                -webkit-flex 1
                overflow hidden
                h2
                    width 100%
                    line-height 0.4rem
                    font-size 0.28rem
                    color #000
                    margin-top .1rem
                p
                    width 100%
                    line-height 0.4rem
                    font-size 0.24rem
                    color #000

            .notice_fr
                width .3rem
                line-height 1rem
                color #9e9e9e

</style>
